<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <p class="addTitle">培训记录</p>
      </el-col>
      <el-col :span="12" style="display: flex; justify-content: end; align-items: center">
        <el-button type="primary" @click="saveForm"> 保存 </el-button>
        <el-button @click="goBack"> 返回 </el-button>
      </el-col>
    </el-row>
    <el-form :model="tableData">
      <el-form-item label="培训名称" label-width="100px" prop="trainName">
        <el-input v-model="tableData[0].trainName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="讲师">
        <el-input v-model="tableData[0].trainContent" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker v-model="tableData[0].dateTime" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
      <el-form-item label="时长">
        <el-input v-model="tableData[0].dateTime" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="培训内容">
        <el-input type="textarea" v-model="tableData[0].trainContent" />
      </el-form-item>
      <el-form-item label="培训附件">
        <el-upload :value:file-list="trainFiles" multiple :auto-upload="false" :on-change="(file) => handleChange(file, 1)">
          <el-button>上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="考核方式">
        <el-select v-model="tableData[0].testType">
          <el-option label="实操" value="实操" />
          <el-option label="笔试" value="笔试" />
        </el-select>
      </el-form-item>
      <el-form-item label="考核成绩">
        <el-table :data="tableData[0].trainMemberInfo">
          <el-table-column label="部门" prop="dept">
            <template #default="{ row }">
              <el-input v-model="row.dept" />
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="name">
            <template #default="{ row }">
              <el-input v-model="row.name" />
            </template>
          </el-table-column>
          <el-table-column label="签到时间" prop="signTime">
            <template #default="{ row }">
              <el-time-picker v-model="row.signTime" placeholder="请选择" value-format="HH:mm:ss" />
            </template>
          </el-table-column>
          <el-table-column label="考核成绩" prop="score">
            <template #default="{ row }">
              <el-input v-model="row.score" @blur="updateresult(row.score, row)" />
            </template>
          </el-table-column>
          <el-table-column label="考核结果" prop="result">
            <template #default="{ row }">
              <el-input v-model="row.result" disabled />
            </template>
          </el-table-column>
          <el-table-column label="附件" prop="fileAddress">
            <template #default="{ row }">
              <el-upload :value:file-list="row.fileAddress" multiple :auto-upload="false" :on-change="(file) => handleChange(file, 2, row)">
                <el-button>上传</el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <el-button @click="addList">新增</el-button>
            </template>
            <template #default="{ row }">
              <el-button @click="deleteList(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="考核意见">
            本次共有{{ tableData[0].trainMemberInfo.length }}人参与培训，考核合格{{ qualifiedCount }}人，未合格{{ unqualifiedCount }}人，合格率为{{ qualifiedRate }}
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { getInductiontrainingList, addInductiontraining, updateInductiontraining, deleteInductiontraining, uploadFile } from "@/api/personnelManagement";
import { ElMessage } from "element-plus";
import { computed, reactive, ref } from "vue";
const trainFiles = ref([]);
const tableData = ref([
  {
    dateTime: "",
    testAdvice: "",
    testType: "",
    trainContent: "",
    trainCost: "",
    trainFiles: [] ,
    trainMemberInfo: [
      {
        name: "",
        dept: "",
        signTime: "",
        score: "",
        result: "",
        file: [],
        fileAddress: [],
      },
    ],
    trainName: "",
    trainPlace: "",
    trainTopic: "",
  },
]);
const handleSubmit = async () => {
  const qualifiedCount = tableData.value[0].trainMemberInfo.filter((item) => item.result === "合格").length;
  const unqualifiedCount = tableData.value[0].trainMemberInfo.filter((item) => item.result === "不合格").length;
  const qualifiedRate = tableData.value[0].trainMemberInfo.length === 0 ? 0 : ((qualifiedCount / tableData.value[0].trainMemberInfo.length) * 100).toFixed(2);
  const newForm = reactive({}) as any;
  Object.keys(tableData.value[0]).map((key) => {
    if (key == "testAdvice") {
      newForm.testAdvice = `本次共有${tableData.value[0].trainMemberInfo.length}人参与培训，考核合格${qualifiedCount}人，未合格${unqualifiedCount}人，合格率为${qualifiedRate}`;
    } else if (key == "trainFiles") {
      newForm.trainFiles = JSON.stringify(tableData.value[0].trainFiles);
    } else if (key == "trainMemberInfo") {
      newForm.trainMemberInfo = JSON.stringify(tableData.value[0].trainMemberInfo);
    } else {
      newForm[key] = tableData.value[0][key];
    }
  });
  // console.log(newForm, "提交表单", tableData.value[0]);

  const { code } = await addInductiontraining(newForm);
  if (code == 200) {
    ElMessage.success("保存成功");
  }
};
const handleChange = async (file: any, num: number, row?: any) => {
  const newForm = new FormData();
  newForm.append(`file`, file.raw);
  const { code, data } = (await uploadFile(newForm)) as any;
  if (code == 200) {
    if (num == 1) {
      tableData.value[0].trainFiles.push({
        name: data.originalFileName,
        url: data.url,
      });
    } else {
      row.file.push({
        name: data.originalFileName,
        url: data.url,
      });
    }
  }
};
const updateresult = (score, row) => {
  if (score >= 60) {
    row.result = "合格";
  } else {
    row.result = "不合格";
  }
};
const qualifiedCount = computed(() => {
  return tableData.value[0].trainMemberInfo.filter((item) => item.result === "合格").length;
});
const unqualifiedCount = computed(() => {
  return tableData.value[0].trainMemberInfo.filter((item) => item.result === "不合格").length;
});
const qualifiedRate = computed(() => {
  if (tableData.value[0].trainMemberInfo.length === 0) return 0;
  return ((qualifiedCount.value / tableData.value[0].trainMemberInfo.length) * 100).toFixed(2);
});
const addList = () => {
  tableData.value[0].trainMemberInfo.push({
    name: "",
    dept: "",
    signTime: "",
    score: "",
    result: "",
    file: [],
    fileAddress: [],
  });
};
const deleteList = (row: any) => {
  const index = tableData.value[0].trainMemberInfo.indexOf(row);
  if (index !== -1) {
    tableData.value[0].trainMemberInfo.splice(index, 1);
  }
};
const goBack = () => {};
const saveForm = () => {};
</script>

<style scoped></style>
